<template>
  <div>
    <form class="form-horizontal" ref = "taskEditForm">
      <div class="form-group">
        <label class="col-sm-3 control-label">名称</label>
        <div class="col-sm-4">
          <input class="form-control" placeholder="NAME FOR TASK" v-model="task.name">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-4 col-sm-offset-3">
          <!-- Indicates a successful or positive action -->
          <button type="button" class="btn btn-success" @click="save"><i class="glyphicon glyphicon-ok"></i><span>保存</span></button>
          <button type="button" class="btn btn-default" @click="clear"><i class="glyphicon glyphicon-erase"></i><span>重置</span></button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
    export default {
        name: "TaskEdit",
        methods : {
          formInitData () {
            return {
              task : {
                name : ''
              }
            }
          },
          save () {
            console.log({'name': this.task.name, 'createDate': new Date(), 'id': '12345678'})
            alert('保存成功!')
            this.clear()
          },
          clear () {
            this.task = this.formInitData()
          }
        },
        data () {
          return {
            task : this.formInitData()
          }
        }
    }
</script>

<style scoped>

</style>
